<template>
    <!-- 底部部分 -->
    <footer class="footer">
        <span class="todo-count">剩余<strong>{{ totalCount }}</strong></span>
        <ul @click="$emit('changeType', type)" class="filters">
            <li>
                <a @click="type = 'all'" :class="{ selected: type === 'all' }" href="#/">全部</a>
            </li>
            <li>
                <a @click="type = 'no'" :class="{ selected: type === 'no' }" href="#/active">进行中</a>
            </li>
            <li>
                <a @click="type = 'yes'" :class="{ selected: type === 'yes' }" href="#/completed">已完成</a>
            </li>
        </ul>
        <button @click="hClear" v-show="showClear" class="clear-completed">清除已完成</button>
    </footer>
</template>

<script>
export default {
    props: {
        list: {
            type: Array,
            required: true
        }
    },
    data() {
        return {
            type: 'all'
        }
    },
    methods: {
        hClear() {
            this.$emit('clearDone')
        }
    },
    computed: {
        totalCount() {
            return this.list.length
        },
        showClear() {
            return this.list.some(item => item.isDone)
        }
    }
}
</script>

<style>

</style>